<html>
<head>
<style type="text/css">

body {
	margin: 0px;
}

@media screen and (max-width: 479px)
{
svg.map {
	width: 320px;
	height: 480px;
	background-color: black;
}
}
@media screen and (min-width: 480px)
{
svg.map {
	width: 480px;
	height: 320px;
	background-color: black;
}
}

.hud {
	fill: black;
	stroke: gold;
	stroke-width: 2px;
}
.hud .button text {
	text-anchor: middle;
	dominant-baseline: central;
	font-family: Arial;
	font-size: 5;
	stroke: gold;
	stroke-width: 1px;
}
.hud .button:hover {
	stroke: red;
}

g.area {
	fill: white;
	stroke: gray;
	stroke-width: 2px;
}
g.area:hover {
	stroke: red;
}
g.area text {
	text-anchor: middle;
	dominant-baseline: central;
}
g.area.selected {
	stroke: green;
}

g.arealanes {
	stroke: green;
}
g.arealanes.selected {
	stroke: green;
}
g.lane {
	fill: gray;
	stroke: gray;
	stroke-width: 2px;
}
g.lane text {
	text-anchor: middle;
	dominant-baseline: central;
}

.player0 {
	stroke: gray;
}
.player1 {
	stroke: blue;
}
.player2 {
	stroke: red;
}

</style>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript" src="/scripts/svgbase.js"></script>
<script type="text/javascript">

function addToSet(set, value) {
	var result = set;
	var values = set.split(" ");
	var isnew = true;
	for (var i = 0; i < values.length; ++i) {
		if (value == values[i]) {
			isnew = false;
		}
	}
	if (isnew) {
		result += " "+ value;
	}
	return result.trim();
}
function removeFromSet(set, value) {
	var result = "";
	var values = set.split(" ");
	for (var i = 0; i < values.length; ++i) {
		if (value != values[i]) {
			result += " "+ values[i];
		}
	}
	return result.trim();
}
function test() {
	var x = "";
	if (addToSet("", "x") == "x") x += "1";
	if (addToSet("x", "x") == "x") x += "2";
	if (addToSet("a b", "x") == "a b x") x += "3";
	if (addToSet("a b x", "x") == "a b x") x += "4";
	if (removeFromSet("a b x", "x") == "a b") x += "5";
	if (removeFromSet("a b", "x") == "a b") x += "6";
	if (removeFromSet("x", "x") == "") x += "7";
	if (removeFromSet("", "x") == "") x += "8";
	if (x != "") alert(x);
}

function GameState() {
	this.selected;
	this.clickArea = function(area) {
		// Select?
		// Build?
		// Move?
		if (!this.selected) {
			this.selected = area;

			var areasvg = area.areasvg;
			var classes = areasvg.getAttributeNS (null, 'class');
			areasvg.setAttributeNS (null, 'class', addToSet(classes, "selected"));

			var lanessvg = area.lanessvg;
			var classes = lanessvg.getAttributeNS (null, 'class');
			lanessvg.setAttributeNS (null, 'class', addToSet(classes, "selected"));

			return;
		}
		if (this.selected == area) {
			this.selected = null;

			var areasvg = area.areasvg;
			var classes = areasvg.getAttributeNS (null, 'class');
			areasvg.setAttributeNS (null, 'class', removeFromSet(classes, "selected"));

			var lanessvg = area.lanessvg;
			var classes = lanessvg.getAttributeNS (null, 'class');
			lanessvg.setAttributeNS (null, 'class', removeFromSet(classes, "selected"));

			return;
		}

		if (this.selected && this.selected != area) {
			alert("Move");
		}
	}
}
var state = new GameState();

function clickArea(area) {
	state.clickArea(area);
}
function endTurn() {
	var gameId = document.getElementById("gameId");
	if (gameId == null) return;

	ajaxRequest("endturn.jsp?id="+ gameId.value, function(json) {
	});
}

var viewport = null;

function Viewport(w, h) {
	this.w = w;
	this.h = h;

	this.getX = function(map, s) {
		return s * map.width / w;
	}
	this.getY = function(map, t) {
		return t * map.height / h;
	}
	this.getS = function(map, x) {
		return x / map.width * w;
	}
	this.getT = function(map, y) {
		return y / map.height * h;
	}
}
function loadViewport() {
	viewport = new Viewport(480, 320);
}

function wrapGame(game) {
	if (game == null) return;

	game.getPlayer = function(name) {
		var players = this.players;
		for (var i = 0; i < players.length; ++i) {
			var player = players[i];
			if (player.name == name) return player;
		}
		return null;
	}
	game.getPlayerId = function(name) {
		var players = this.players;
		for (var i = 0; i < players.length; ++i) {
			var player = players[i];
			if (player.name == name) return i;
		}
		return 0;
	}

	return game;
}
function wrapMap(map) {
	if (map == null) return;

	map.getArea = function(name) {
		var areas = this.areas;
		for (var i = 0; i < areas.length; ++i) {
			var area = areas[i];
			if (area.name == name) return area;
		}
		return null;
	}

	return map;
}

function loadGame() {
	ajaxRequest("getgame.jsp", function(game) {
		var game = wrapGame(game);
		var map = wrapMap(game.map);
		var svgMap = buildMap(game, map);

		document.body.appendChild(svgMap);
	});
}
function buildMap(game, map) {
	var svgMap = createMap(map);

	var svgLanes = document.createElementNS (SVG, "g");
	svgMap.appendChild(svgLanes);
	var svgAreas = document.createElementNS (SVG, "g");
	svgMap.appendChild(svgAreas);
	svgMap.appendChild(buildHUD());

	var areas = map.areas;
	for (var i = 0; i < areas.length; ++i) {
		var area = areas[i];

		svgAreas.appendChild(createArea(game, area));
		buildLanes(svgLanes, game, map, area);
	}

	return svgMap;
}
function buildLanes(svgLanes, game, map, area) {
	var g = document.createElementNS (SVG, "g");
	g.setAttributeNS (null, 'class', "arealanes");

	svgLanes.appendChild(g);

	var targets = area.targets;
	for (var i = 0; i < targets.length; ++i) {
		var targetName = targets[i];
		var target = map.getArea(targetName);
		if (target == null) continue;

		g.appendChild(createLane(game, area, target));
	}

	area.lanessvg = g;
}
function buildHUD() {
	var hud = document.createElementNS (SVG, "g");
//	var hud = document.createElementNS (SVG, "svg");
//	hud.setAttributeNS (null, 'viewBox', "0 0 100 100");
//	hud.setAttributeNS (null, 'width', "100px");
//	hud.setAttributeNS (null, 'height', "300px");
//	hud.setAttributeNS (null, 'preserveAspectRatio', "xMaxYMin meet");

	hud.setAttributeNS (null, 'class', "hud");

	hud.appendChild(buildButton(-20,  5, 10, "STA", function() { alert("Status"); }));
	hud.appendChild(buildButton(120,  5, 10, "MSG", function() { alert("Message"); }));

	hud.appendChild(buildButton(-20,  35, 10, "STA", function() { alert("Status"); }));
	hud.appendChild(buildButton(120,  35, 10, "STA", function() { alert("Status"); }));
	hud.appendChild(buildButton(-20,  65, 10, "MSG", function() { alert("Message"); }));
	hud.appendChild(buildButton(120,  65, 10, "MSG", function() { alert("Message"); }));

	hud.appendChild(buildButton(-20, 95, 10, "REZ", function() { alert("REZ"); }));
	hud.appendChild(buildButton(5, 95, 10, "REZ", function() { alert("REZ"); }));
	hud.appendChild(buildButton(35, 95, 10, "REZ", function() { alert("REZ"); }));
	hud.appendChild(buildButton(65, 95, 10, "REZ", function() { alert("REZ"); }));
	hud.appendChild(buildButton(95, 95, 10, "END", endTurn));
	hud.appendChild(buildButton(120, 95, 10, "END", endTurn));

	return hud;
}
function buildButton(x, y, r, text, action) {
	var button = document.createElementNS (SVG, "g");
	button.setAttributeNS (null, 'class', "button");
	button.appendChild(buildCircle(x, y, r, ""));
	button.appendChild(buildText(x, y, text, ""));
	button.onclick = action;
	return button;
}

function createMap(map) {
	var svgMap = document.createElementNS (SVG, "svg");
//	svgMap.setAttributeNS (null, 'viewBox', "0 0 480 320");
//	svgMap.setAttributeNS (null, 'viewBox', "0 0 100 100");
	svgMap.setAttributeNS (null, 'viewBox', "0 0 "+ map.width +" "+ map.height);
	svgMap.setAttributeNS (null, 'class', "map");
	return svgMap;
}
function createArea(game, area) {
//	var color = Math.random()*360;

	var g = document.createElementNS (SVG, "g");
	g.setAttributeNS (null, 'class', "area player"+ game.getPlayerId(area.owner));
	g.setAttributeNS (null, 'transform', "translate("+area.x+" "+area.y+")");

	g.appendChild(buildCircle(0, 0, 7, ""));
	g.appendChild(buildText(0, 0, area.force, "font-family: Arial; font-size: 10; stroke: black; stroke-width: 1px"));

	g.appendChild(buildCircle(-5, -5, 3, "stroke: transparent"));
	g.appendChild(buildText(-5, -5, area.force, "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));

	g.appendChild(buildCircle(5, -5, 3, "stroke: transparent"));
	g.appendChild(buildText(5, -5, area.force, "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));

	g.appendChild(buildCircle(-5, 5, 3, "stroke: transparent"));
	g.appendChild(buildText(-5, 5, area.force, "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));

	g.appendChild(buildCircle(5, 5, 3, "stroke: transparent"));
	g.appendChild(buildText(5, 5, area.force, "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));

	var mlistener = buildCircle(0, 0, 10, "fill: transparent; stroke: transparent");
	mlistener.setAttributeNS (null, 'class', "mlistener");
	mlistener.setAttributeNS (null, 'name', area.name);
	mlistener.onclick = function() { clickArea(area); }
	g.appendChild(mlistener);

	area.areasvg = g;

	return g;
}
function createLane(game, area, target) {
	var ownerId = 0;
	if (area.owner == target.owner) {
		ownerId = game.getPlayerId(area.owner);
	}

	var g = document.createElementNS (SVG, "g");
	g.setAttributeNS (null, 'class', "lane player"+ ownerId);

	g.appendChild(buildLine(area.x, area.y, target.x, target.y, ""));

	var dx = target.x - area.x;
	var dy = target.y - area.y;
	var x = area.x + dx/2;
	var y = area.y + dy/2;

//	g.appendChild(buildCircle(x, y, 3, "stroke: transparent"));
//	g.appendChild(buildText(x, y, "+", "font-family: Arial; font-size: 5; stroke: black; stroke-width: 1px"));
	return g;
}

function init() {
	loadViewport();
	loadGame();
}

window.onload = init;

</script>
</head>
<body>
<a href="getgame.jsp">Get Game</a>
<input id="gameId"></input>
</body>
</html>
